import { useNavigate } from 'react-router';

export function Home() {
  const nav = useNavigate();

  return (
    <view className="page-container">
      <view className="header">
        <text className="back" bindtap={() => nav('/')}>
          ←
        </text>
        <text className="title">首页</text>
      </view>

      <view className="content">
        <view className="card">
          <text className="card-title">欢迎使用 Lynx</text>
          <text className="card-desc">这是一个基于 React 的跨平台开发框架</text>
        </view>

        <view className="feature-list">
          <view className="feature-item" bindtap={() => nav('/about')}>
            <view className="feature-icon">📱</view>
            <view className="feature-content">
              <text className="feature-title">跨平台开发</text>
              <text className="feature-desc">一次开发，多端运行</text>
            </view>
            <view className="feature-arrow">→</view>
          </view>

          <view className="feature-item">
            <view className="feature-icon">⚡</view>
            <view className="feature-content">
              <text className="feature-title">高性能</text>
              <text className="feature-desc">接近原生的性能体验</text>
            </view>
          </view>

          <view className="feature-item">
            <view className="feature-icon">🎨</view>
            <view className="feature-content">
              <text className="feature-title">组件化</text>
              <text className="feature-desc">丰富的组件库支持</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  );
}
